<!--
倒计时组件
props: 
count 要倒计时的秒数
placeholder 默认显示的内容
emit: 
downing 开始倒计时
-->
<template>
  <div class="container" :class="{'downing':downing}" @click="down">
    <!-- <p>发送</p> -->
    <p>{{downing?count+'s':placeholder}}</p>
  </div>
</template>
<script>
  export default {
      watch:{
          count(){
              if(this.downing)
              {
                  if(this.count>0)
                  {
                      setTimeout(() => {
                      this.count--
                    }, 1000);
                  }
                  else{
                      this.downing=false;
                      this.count=this.count1;
                  }
                  
              }
          }
      },
      methods:{
          /**
           * @description 开始倒计时
           */
          down(){
              if(!this.downing)
              {
                  this.downing=true;
                  this.$emit('downing');
                  setTimeout(() => {
                      this.count--
                  }, 1000);
              }
          }
      },
    data() {
      return {
        downing: false, //是否在倒计时中
        count1: 0, //用了存储原来的倒计时的
      }
    },
    props: {
      count: {
        default: 60
      },
      placeholder: {
          default: '发送'
      }
    },
    mounted:function(){
        this.count1=this.count;
    }
  }

</script>

<style lang="less" scoped>
  @import url('./theme.less');
  .container {
    width: @width;
    height: @height;
    background: @background;
    border-radius: 6px;
    &.downing{
        background: @down_background;
    }
    p {
      line-height: @height;
      width: @width;
      height: @height;
      color: #FFF;
      text-align: center;
    }
  }

</style>
